<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>探索 - 播客应用</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css">
  <link rel="stylesheet" href="styles.css">
  <style>
    /* 设置样机尺寸 */
    body {
      margin: 0 auto;
      padding: 0;
    }
    
    .app-container {
      width: 375px;
      height: 812px;
      margin: 0 auto;
      max-width: 100%;
      max-height: 100vh;
      overflow: hidden;
      position: relative;
      display: flex;
      flex-direction: column;
      background-color: white;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
      border-radius: 28px;
    }
    
    /* iOS 状态栏调整 */
    .ios-status-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 16px 0;
      height: 40px;
      background-color: transparent;
      font-size: 14px;
      font-weight: 600;
      color: #000;
      position: sticky;
      top: 0;
      z-index: 50;
    }
    
    /* 底部导航调整 */
    .tab-bar {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 70px;
      background-color: white;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 375px;
      margin: 0 auto;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      padding-bottom: 10px;
      z-index: 50;
    }
    
    .tab-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 1;
      height: 50px;
      color: #6b7280;
      transition: color 0.2s;
      cursor: pointer;
    }
    
    .tab-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    .tab-text {
      font-size: 10px;
      text-align: center;
      letter-spacing: -0.2px;
    }
    
    /* 优化分类标签导航栏 */
    .category-tabs-container {
      position: sticky;
      top: 96px; /* 调整为考虑iOS状态栏和搜索栏的高度 */
      z-index: 30;
      background-color: white;
      padding: 8px 0;
      margin-top:10px;
      border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    
    .category-tabs {
      display: flex;
      padding: 0 16px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none; /* 火狐浏览器 */
      -ms-overflow-style: none; /* IE/Edge */
      gap: 8px; /* 添加间距 */
    }
    
    .category-tabs::-webkit-scrollbar {
      display: none; /* Chrome/Safari */
    }
    
    .category-tab {
      flex: 0 0 auto;
      padding: 6px 12px;
      border-radius: 9999px;
      font-size: 14px;
      font-weight: 500;
      text-align: center;
      transition: all 0.2s;
      min-width: 60px;
      white-space: nowrap;
    }
    
    .category-tab.active {
      background-color: #4f46e5;
      color: white;
    }
    
    .category-tab:not(.active) {
      background-color: #f3f4f6;
      color: #4b5563;
    }
  </style>
</head>
<body>
  <div class="app-container">
    <!-- iOS 状态栏 -->
    <div class="ios-status-bar">
      <div class="status-left">
        <span class="status-time">11:11</span>
      </div>
      <div class="status-right">
        <i class="ri-signal-wifi-fill"></i>
        <i class="ri-battery-fill"></i>
      </div>
    </div>
    
    <!-- 页面内容 -->
    <div class="main-content pb-36">
      <!-- 搜索栏 -->
      <div class="sticky top-4 z-40 px-4 pt-4 pb-2 bg-white">
        <div class="relative">
          <input type="text" placeholder="搜索播客、主题或创作者" class="w-full bg-gray-100 rounded-full py-3 px-5 pl-12 text-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:bg-white transition" aria-label="搜索框">
          <i class="ri-search-line absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
        </div>
      </div>
      
      <!-- 优化后的标签分类栏 -->
      <div class="category-tabs-container">
        <div class="category-tabs">
          <button class="category-tab active" aria-pressed="true">全部</button>
          <button class="category-tab" aria-pressed="false">科技</button>
          <button class="category-tab" aria-pressed="false">商业</button>
          <button class="category-tab" aria-pressed="false">文化</button>
          <button class="category-tab" aria-pressed="false">历史</button>
          <button class="category-tab" aria-pressed="false">教育</button>
          <button class="category-tab" aria-pressed="false">健康</button>
        </div>
      </div>
      
      <!-- 特色播客 -->
      <div class="mt-4 px-4">
        <h2 class="text-lg font-semibold text-gray-900">特色播客</h2>
        <div class="mt-3 relative rounded-xl overflow-hidden">
          <img src="https://images.unsplash.com/photo-1559523161-0fc0d8b38a77?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="IdeaCast" class="w-full h-40 object-cover">
          <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex flex-col justify-end p-4">
            <span class="text-xs text-indigo-300 font-semibold">本周推荐</span>
            <h3 class="text-white text-lg font-bold mt-1">IdeaCast</h3>
            <p class="text-white/80 text-sm mt-1">由哈佛商业评论推出的深度商业访谈节目</p>
            <button class="mt-3 bg-white px-4 py-2 rounded-full text-sm font-medium text-gray-900 inline-flex items-center click-target" aria-label="收听IdeaCast">
              <i class="ri-play-fill mr-1"></i> 收听最新一期
            </button>
          </div>
        </div>
      </div>
      
      <!-- 流行趋势 -->
      <div class="mt-8 px-4">
        <h2 class="text-lg font-semibold text-gray-900">流行趋势</h2>
        <div class="mt-3 overflow-x-auto py-2 -mx-4 px-4"> <!-- 修复边距问题 -->
          <div class="flex space-x-4"> <!-- 修改为常规flex布局使滚动更自然 -->
            <!-- 趋势卡片 1 -->
            <div class="w-56 flex-shrink-0 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-xl p-4 text-white click-target" aria-label="科技趋势" role="button" tabindex="0">
              <i class="ri-hashtag-line text-xl mb-2"></i>
              <h3 class="font-bold">AI变革</h3>
              <p class="text-xs mt-1 text-white/80">探索人工智能如何改变我们的生活和工作</p>
              <div class="flex items-center mt-3">
                <span class="text-xs font-semibold bg-white/20 rounded-full px-2 py-1">42个播客</span>
              </div>
            </div>
            
            <!-- 趋势卡片 2 -->
            <div class="w-56 flex-shrink-0 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl p-4 text-white click-target" aria-label="文化趋势" role="button" tabindex="0">
              <i class="ri-hashtag-line text-xl mb-2"></i>
              <h3 class="font-bold">文化认同</h3>
              <p class="text-xs mt-1 text-white/80">关于身份认同与社会融合的讨论</p>
              <div class="flex items-center mt-3">
                <span class="text-xs font-semibold bg-white/20 rounded-full px-2 py-1">28个播客</span>
              </div>
            </div>
            
            <!-- 趋势卡片 3 -->
            <div class="w-56 flex-shrink-0 bg-gradient-to-br from-green-500 to-teal-600 rounded-xl p-4 text-white click-target" aria-label="商业趋势" role="button" tabindex="0">
              <i class="ri-hashtag-line text-xl mb-2"></i>
              <h3 class="font-bold">创业故事</h3>
              <p class="text-xs mt-1 text-white/80">成功与失败的创业经历分享</p>
              <div class="flex items-center mt-3">
                <span class="text-xs font-semibold bg-white/20 rounded-full px-2 py-1">35个播客</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 新上线的播客 -->
      <div class="mt-6 px-4">
        <div class="flex items-center justify-between">
          <h2 class="text-lg font-semibold text-gray-900">新上线</h2>
          <a href="#" class="text-sm text-indigo-600 font-medium">查看全部</a>
        </div>
        <div class="mt-3 grid grid-cols-2 gap-3">
          <!-- 播客卡片 1 -->
          <div class="podcast-card click-target" aria-label="播客：未来科学" role="button" tabindex="0">
            <div class="relative">
              <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="未来科学" class="podcast-image">
              <div class="podcast-play">
                <i class="ri-play-fill"></i>
              </div>
            </div>
            <div class="p-2">
              <h3 class="font-medium text-sm">未来科学</h3>
              <p class="text-xs text-gray-500 mt-1">12集 · 科普</p>
            </div>
          </div>
          
          <!-- 播客卡片 2 -->
          <div class="podcast-card click-target" aria-label="播客：财经漫谈" role="button" tabindex="0">
            <div class="relative">
              <img src="https://images.unsplash.com/photo-1579621970588-a35d0e7ab9b6?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="财经漫谈" class="podcast-image">
              <div class="podcast-play">
                <i class="ri-play-fill"></i>
              </div>
            </div>
            <div class="p-2">
              <h3 class="font-medium text-sm">财经漫谈</h3>
              <p class="text-xs text-gray-500 mt-1">8集 · 财经</p>
            </div>
          </div>
          
          <!-- 播客卡片 3 -->
          <div class="podcast-card click-target" aria-label="播客：城市声音" role="button" tabindex="0">
            <div class="relative">
              <img src="https://images.unsplash.com/photo-1498378520120-037792e23003?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="城市声音" class="podcast-image">
              <div class="podcast-play">
                <i class="ri-play-fill"></i>
              </div>
            </div>
            <div class="p-2">
              <h3 class="font-medium text-sm">城市声音</h3>
              <p class="text-xs text-gray-500 mt-1">6集 · 城市文化</p>
            </div>
          </div>
          
          <!-- 播客卡片 4 -->
          <div class="podcast-card click-target" aria-label="播客：心理聊天室" role="button" tabindex="0">
            <div class="relative">
              <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="心理聊天室" class="podcast-image">
              <div class="podcast-play">
                <i class="ri-play-fill"></i>
              </div>
            </div>
            <div class="p-2">
              <h3 class="font-medium text-sm">心理聊天室</h3>
              <p class="text-xs text-gray-500 mt-1">10集 · 心理健康</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 编辑推荐 -->
      <div class="mt-6 px-4 pb-20"> <!-- 减少底部padding以适应更小的屏幕 -->
        <h2 class="text-lg font-semibold text-gray-900">编辑推荐</h2>
        <div class="mt-3 space-y-3"> <!-- 减少间距 -->
          <!-- 推荐播客条目 1 -->
          <div class="p-3 bg-gray-50 rounded-xl flex items-center click-target" aria-label="播客：深度对话" role="button" tabindex="0" onclick="window.location.href='podcast-detail.html'">
            <img src="https://images.unsplash.com/photo-1495020689067-958852a7765e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="深度对话" class="w-14 h-14 rounded-lg object-cover"> <!-- 减小图片尺寸 -->
            <div class="ml-3 flex-1">
              <h3 class="font-medium text-gray-900">深度对话</h3>
              <p class="text-xs text-gray-500 mt-1">深入剖析各个领域的前沿话题</p>
              <div class="flex items-center mt-1"> <!-- 减少上边距 -->
                <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-0.5 rounded-full mr-2">4.9 ★</span>
                <span class="text-xs text-gray-500">每周更新</span>
              </div>
            </div>
            <button class="ml-2 w-8 h-8 flex items-center justify-center bg-gray-200 text-indigo-600 rounded-full">
              <i class="ri-arrow-right-s-line"></i>
            </button>
          </div>
          
          <!-- 推荐播客条目 2 -->
          <div class="p-3 bg-gray-50 rounded-xl flex items-center click-target" aria-label="播客：历史解密" role="button" tabindex="0">
            <img src="https://images.unsplash.com/photo-1507842217343-583bb7270b66?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="历史解密" class="w-14 h-14 rounded-lg object-cover"> <!-- 减小图片尺寸 -->
            <div class="ml-3 flex-1">
              <h3 class="font-medium text-gray-900">历史解密</h3>
              <p class="text-xs text-gray-500 mt-1">揭开历史上鲜为人知的秘密</p>
              <div class="flex items-center mt-1"> <!-- 减少上边距 -->
                <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-0.5 rounded-full mr-2">4.7 ★</span>
                <span class="text-xs text-gray-500">双周更新</span>
              </div>
            </div>
            <button class="ml-2 w-8 h-8 flex items-center justify-center bg-gray-200 text-indigo-600 rounded-full">
              <i class="ri-arrow-right-s-line"></i>
            </button>
          </div>
          
          <!-- 推荐播客条目 3 -->
          <div class="p-3 bg-gray-50 rounded-xl flex items-center click-target" aria-label="播客：旅行者笔记" role="button" tabindex="0">
            <img src="https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="旅行者笔记" class="w-14 h-14 rounded-lg object-cover"> <!-- 减小图片尺寸 -->
            <div class="ml-3 flex-1">
              <h3 class="font-medium text-gray-900">旅行者笔记</h3>
              <p class="text-xs text-gray-500 mt-1">全球旅行达人分享地道体验</p>
              <div class="flex items-center mt-1"> <!-- 减少上边距 -->
                <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-0.5 rounded-full mr-2">4.8 ★</span>
                <span class="text-xs text-gray-500">每月更新</span>
              </div>
            </div>
            <button class="ml-2 w-8 h-8 flex items-center justify-center bg-gray-200 text-indigo-600 rounded-full">
              <i class="ri-arrow-right-s-line"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="tab-bar">
      <div class="tab-item" data-page="home.html">
        <i class="ri-home-5-line tab-icon"></i>
        <span class="tab-text">首页</span>
      </div>
      <div class="tab-item active-tab" data-page="discover.html">
        <i class="ri-compass-fill tab-icon"></i>
        <span class="tab-text">探索</span>
      </div>
      <div class="tab-item" data-page="library.html">
        <i class="ri-folder-music-line tab-icon"></i>
        <span class="tab-text">收藏</span>
      </div>
      <div class="tab-item" data-page="profile.html">
        <i class="ri-user-line tab-icon"></i>
        <span class="tab-text">我的</span>
      </div>
    </div>
  </div>
  
  <script src="components.js"></script>
  <script>
    // 分类标签点击事件
    document.addEventListener('DOMContentLoaded', function() {
      const categoryTabs = document.querySelectorAll('.category-tab');
      
      categoryTabs.forEach(tab => {
        tab.addEventListener('click', function() {
          // 移除所有标签的激活状态
          categoryTabs.forEach(t => {
            t.classList.remove('active');
            t.setAttribute('aria-pressed', 'false');
          });
          
          // 为当前点击的标签添加激活状态
          this.classList.add('active');
          this.setAttribute('aria-pressed', 'true');
        });
      });
      
      // 模拟iOS实时时钟
      function updateClock() {
        const now = new Date();
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        document.querySelector('.status-time').textContent = `${hours}:${minutes}`;
      }
      
      // 初始更新时钟
      updateClock();
      // 每分钟更新一次时钟
      setInterval(updateClock, 60000);
    });
  </script>
</body>
</html> 
